<template>
    <div class="home-news-block">
        <div style="display: flex;justify-content: space-between">
            <el-col style="width: 58%">
                <div class="news-list">
                    <el-tabs v-model="activeIndex" @tab-click="handleClick">
                        <el-tab-pane :label="item.name" :name="item.id" v-for="(item,index) in titleList" >

                            <div @click="$router.push({name: 'misArticle', query:{ sno: items.sno }})" class="info-item" v-for="(items,itemsIndex) in item.data" v-if="itemsIndex <= 4" >
                                <div class="item-date">
                                    <div class="days">{{dayjs(items.deploydate).format("DD")}}</div>
                                    <div class="year-month">{{dayjs(items.deploydate).format("YYYY-MM")}}</div>
                                </div>
                                <div class="item-content">
                                    <div class="title">{{items.title}}</div>
                                    <div class="val">{{items.info}}</div>
                                </div>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
            <el-col style="width: 38%">
                <div class="carousel">
                    <el-carousel height="390px">
                        <el-carousel-item v-for="item in 4" :key="item" style="background: #999999">
                            <div class="carousel-content">
                                <div class="small">{{ item }}</div>
                                <div class="carousel-title">省“十二五”规划2013年度南京市基础教育重点资助课题sasdasdas</div>
                            </div>

                        </el-carousel-item>
                    </el-carousel>
                </div>
            </el-col>
        </div>


    </div>
</template>

<script>
    import {getLatestWztj,getLatestXxgk,getLatestJsky,getLatestSpxw, getLatestGzz, getLatestJzxx,getLatestMsfc} from "@/api/content";
    import dayjs from 'dayjs'

    export default {
        name: "home-news-block",
        data(){
            return{
              dayjs,
                activeIndex: '0',
                titleList:[
                    // {name:'教育科研',id:'0',type:'education',data:[{time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'},
                    //         {time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'},
                    //         {time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'},
                    //         {time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'},
                    //         {time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'},
                    //         {time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'},]},
                    // {name:'教学研究',type:'teaching',id:'1',data:[{time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'}]},
                    // {name:'教师培训',type:'train',id:'2',data:[{time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'}]},
                    // {name:'现代教育技术',type:'technology',id:'3',data:[{time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'}]},
                    // {name:'心理教育',type:'psychology',id:'4',data:[{time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'}]},
                    // {name:'家长学校',type:'parent',id:'5',data:[{time:'2020-10-04',title:'喜报：玄武区接连在省、市优秀科研成果奖评选中获得好成绩',info:'近期，玄武区教科研方面喜报频传。2020年底公布的第五届江苏省教育科学优秀成果奖评选结果，由玄武区教科所ssssssssss'}]},
                ],
            }
        },
        async created(){
          let res1 = await getLatestWztj();
          let res2 = await getLatestXxgk();
          let res3 = await getLatestJsky();
          let res4 = await getLatestSpxw();
          let res5 = await getLatestGzz();
          let res6 = await getLatestJzxx();
          this.titleList.push({name: '教育科研',data:res1.data})
          this.titleList.push({name: '教学研究',data:res2.data})
          this.titleList.push({name: '教师培训',data:res3.data})
          this.titleList.push({name: '现代教育技术',data:res4.data})
          this.titleList.push({name: '心理教育',data:res5.data})
          this.titleList.push({name: '家长学校',data:res6.data})
        },
        methods:{
            /**
             * 跳转信息内容页面
             */
            jumpTo(){
                let pageInfo = [{name:'首页',type:'misHome'}];
                //页面导航信息录入
                pageInfo.push({name:this.titleList[this.activeIndex].name,type:this.titleList[this.activeIndex].type});
                pageInfo = [...pageInfo,{name:'信息内容'}];
                this.$router.push({path:'/articleDetails',query:{pageInfo:this.$utils.encodeURIAndStringify(pageInfo)}})
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
        }
    }
</script>

<style lang="scss" src="./index.scss" scoped>

</style>
